<template>
  <div class="editor-release">
    <vua-modal v-model="modelValue">
      <div class="editor-release__wrapper">
        <div class="close" @click="toClose">
          <close />
        </div>

        <div class="title">发布文章</div>

        <div class="content">
          <el-form :model="form" label-width="120px">
            <el-form-item label="分类:">
              <el-select v-model="form.category" placeholder="请选择分类" size="large">
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="标签:">
              <el-select v-model="form.tag" placeholder="请选择标签" size="large">
                <el-option
                  v-for="item in tagOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="文章封面:">
              <img class="article-img" :src="form.articleImg" v-if="form.articleImg" alt="" />
              <div v-else class="article-img" @click="uploadArticleImg">+</div>
            </el-form-item>

            <el-form-item label="文章摘要:">
              <el-input
                v-model="form.articeSummary"
                type="textarea"
                placeholder="会显示在列表外缩略内容"
                maxlength="100"
                show-word-limit
              />
            </el-form-item>
          </el-form>
        </div>

        <div class="on-submit">
          <el-button style="width: 102px">取消</el-button>
          <el-button type="info" @click="OnSubmitDraft">存入草稿箱</el-button>
          <el-button type="primary" @click="onSubmit">确定并发布</el-button>
        </div>
      </div>
    </vua-modal>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUpdate, onMounted, onUpdated, reactive, toRefs, watch } from 'vue'
import VuaModal from '/@/components/modal/Modal'
import { Close } from '@element-plus/icons-vue'

import { imagesUpload } from '/@/api/utils/imagesUpload'

const props = defineProps({
  modelValue: Boolean,
  articleSummary: String,
  formData: Object
})

watch(props, (newText) => {
  form.articeSummary = props.articleSummary

  form.category = (String(props.formData?.categoryId) == 'undefined' || props.formData?.categoryId == 0)? '' : String(props.formData?.categoryId)

  form.tag = (String(props.formData?.tagId) == 'undefined' || props.formData?.tagId == 0)? '' : String(props.formData?.tagId)
  form.articleImg = props.formData?.articleImg ?? ''
})


const form = reactive({
  category: '',
  tag: '',
  articleImg: '',
  articeSummary: props.articleSummary
})

const categoryOptions = [
  {
    value: '1',
    label: '后端'
  },
  {
    value: '2',
    label: '前端'
  },
  {
    value: '3',
    label: 'Android'
  },
  {
    value: '4',
    label: 'iOS'
  }
]

const tagOptions = [
  {
    value: '1',
    label: 'JavaScript'
  },
  {
    value: '2',
    label: 'GitHub'
  },
  {
    value: '3',
    label: '面试'
  },
  {
    value: '4',
    label: '架构'
  },
  {
    value: '5',
    label: 'Vue.js'
  },
  {
    value: '6',
    label: 'React'
  }
]

const emits = defineEmits(['update:modelValue', 'submit', 'submitDraft'])

let { modelValue } = toRefs(props)

const toClose = () => {
  emits('update:modelValue', false)
}

const uploadArticleImg = () => {
  //创建上传文件标签
  let eInputFile: any = document.createElement('input')
  eInputFile.setAttribute('type', 'file')
  eInputFile.setAttribute('name', 'certificate')
  eInputFile.setAttribute('accept', '.jpg, .jpeg, .png')

  //监听上传事件
  eInputFile.addEventListener('change', function (oEvent: any) {
    let eInputFile = oEvent.target
    let oFile = eInputFile?.files[0]

    //创建表单对象
    let oFormData = new FormData()
    //将上传的文件加入到表单对象
    oFormData.append('file', oFile)

    imagesUpload(oFormData).then((res) => {
      form.articleImg = res.data
    })
  })

  //创建上传事件
  let eMouseEvent = new MouseEvent('click')
  //自动触发上传事件
  eInputFile.dispatchEvent(eMouseEvent)
}

const onSubmit = () => {
  emits('submit', form)
}

const OnSubmitDraft = () => {
  emits('submitDraft', form)
}
</script>

<style lang="scss" scoped>
:deep(.el-textarea__inner) {
  height: 120px;
}

.editor-release {
  &__wrapper {
    width: 720px;
    height: 800px;
    background-color: white;
    border-radius: 8px;

    padding: 40px;

    box-sizing: border-box;

    position: absolute;

    .close {
      position: absolute;
      top: 20px;
      right: 20px;

      width: 18px;
      height: 18px;

      cursor: pointer;
    }

    .title {
      font-size: 16px;
      font-weight: 600;

      padding-bottom: 15px;

      box-sizing: border-box;

      border-bottom: 1px solid #eee;
    }

    .content {
      margin-top: 20px;
      width: 90%;

      height: 600px;

      .article-img {
        width: 148px;
        height: 148px;
        background-color: #fafafa;
        cursor: pointer;
        font-size: 50px;
        font-weight: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;

        &:hover {
          border: 1px solid #409eff;
        }
      }
    }

    .on-submit {
      width: 100%;
      height: 80px;

      box-sizing: border-box;
      padding-top: 15px;

      border-top: 1px solid #eee;

      display: flex;

      justify-content: end;
    }
  }
}
</style>
